<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>每月统计</title>
<%@ include file="/pages/common/base/Head2.jsp"%>
<script type="text/javascript"
	src="/${res.contextPath}/js/finance/daily-balance-statistics.js?verison=${res.version}"></script>
<script type="text/javascript"
	src="/${res.contextPath}/js/echarts/echarts.min.js?verison=${res.version}" charset='utf-8'></script>

<script>
	$(function() {
		DailyBalanceStatistics.initPage("${res.contextPath}");
	});
</script>
</head>
<body>
<form class="layui-form">
<div class="layui-form-item" style="margin-top:20px;">
<div class="layui-inline">
	<label class="layui-form-label">月份选择</label>
	<div class="layui-input-block">
		<input type="text" name="date" id="date" autocomplete="off"
			class="layui-input">
	</div>
</div>
<div class="layui-inline">
	<label class="layui-form-label">总支出</label>
	<label class="layui-form-label" id="payNum" style="color:red;">${pay}元</label>
</div>
<div class="layui-inline">
	<label class="layui-form-label">总收入</label>
	<label class="layui-form-label" id="incomeNum" style="color:red;">${income}元</label>
</div>
</div>
</form>
	<div id="pay" style="width:40%;height:500px;margin-left:50px;margin-top:30px;float:left;"></div>
	<div id="income" style="width:40%;height:500px;margin-left:50px;margin-top:30px;float:left;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('pay'));
		var option = {};
		var app = {};
		app.title = '环形图';

		option = {
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        data:[
	            	<c:forEach items="${dailyBalanceList}" var="item" varStatus="index">
					'${item.balanceTypeName}'
					<c:if test="${index.last==false}">
					 ,
					</c:if>
				</c:forEach>
		        	
		        ]
		    },
		    series: [
		        {
		            name:'当月开销',
		            type:'pie',
		            radius: ['50%', '70%'],
		            avoidLabelOverlap: false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: true,
		                    textStyle: {
		                        fontSize: '30',
		                        fontWeight: 'bold'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		            	<c:forEach items="${dailyBalanceList}" var="item" varStatus="index">
							{value:${item.money} ,name:'${item.balanceTypeName}'}
							<c:if test="${index.last==false}">
							,
							</c:if>
						</c:forEach>
		               
		            ]
		        }
		    ]
		};
		 myChart.setOption(option);
	</script>
		<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('income'));
		var option = {};
		var app = {};
		app.title = '环形图';

		option = {
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        data:[
	            	<c:forEach items="${dailyIncomeList}" var="item" varStatus="index">
					'${item.balanceTypeName}'+"(${item.money})"
					<c:if test="${index.last==false}">
					 ,
					</c:if>
				</c:forEach>
		        	
		        ]
		    },
		    series: [
		        {
		            name:'当月收入',
		            type:'pie',
		            radius: ['50%', '70%'],
		            avoidLabelOverlap: false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: true,
		                    textStyle: {
		                        fontSize: '30',
		                        fontWeight: 'bold'
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		            	<c:forEach items="${dailyIncomeList}" var="item" varStatus="index">
							{value:${item.money} ,name:'${item.balanceTypeName}'}
							<c:if test="${index.last==false}">
							,
							</c:if>
						</c:forEach>
		               
		            ]
		        }
		    ]
		};
		 myChart.setOption(option);
	</script>
</body>
</html>